<template>
  <div class="big-screen sub-screen">
    <Header :title="title" />
    <div class="w-full" style="height: calc(100% - 80px)">
      <el-row :gutter="2" class="h-full">
        <!-- 左侧 -->
        <el-col :span="4">
          <el-row class="h-1/5">
            <dv-border-box12 class="w-full p-4" :color="['#6e87a4', '#40c3c8']">
              <div class="h-full flex flex-col">
                <!-- 患者姓名 & 真实姓名/住址 & 是否收藏 -->
                <div class="h-1/2 flex justify-between items-center">
                  <span
                    class="w-14 h-14 rounded-xl bg-amber-400 text-2xl font-bold flex justify-center items-center"
                  >
                    <span>{{ patientInfo.patientName.slice(1) }}</span>
                  </span>
                  <div class="h-full relative">
                    <span class="h-1/2 mr-4">
                      {{ patientInfo.patientName }}
                    </span>
                    <Sex1
                      v-if="patientInfo.patientSex === 'male'"
                      class="w-5 h-5 inline-block"
                    />
                    <Sex2 v-else class="w-5 h-5 inline-block" />
                    <p class="h-1/2">{{ patientInfo.patientAddr }}</p>
                  </div>
                  <span title="收藏">
                    <Collect1
                      v-if="showCollect === true"
                      class="w-6 h-6"
                      @click="toggleCollect"
                    />
                    <Collect2 v-else class="w-6 h-6" @click="toggleCollect" />
                  </span>
                </div>
                <!-- 住院号 & 身份证号 -->
                <div class="h-1/2 text-xl mt-2">
                  <p>{{ patientInfo.patientNo }}</p>
                  <div class="h-1/2 flex justify-between items-center">
                    <p>{{ displayedIdNo }}</p>
                    <Eye1
                      v-if="showEye === true"
                      class="w-6 h-6"
                      @click="toggleIdNo"
                    />
                    <Eye2 v-else class="w-6 h-6" @click="toggleIdNo" />
                  </div>
                </div>
              </div>
            </dv-border-box12>
          </el-row>
          <el-row class="h-4/5">
            <dv-border-box12
              class="w-full h-full p-4"
              :color="['#6e87a4', '#40c3c8']"
            >
              <!-- 搜索框 -->
              <div class="w-full h-7 border-b-2 border-cyan-400">
                <input
                  v-model="searchText"
                  class="w-full h-full bg-transparent text-white text-sm"
                  placeholder="输入科室或者诊断检索"
                  @keyup.enter="handleSearch"
                />
              </div>
              <!-- 诊断列表 -->
              <div class="w-full h-full overflow-y-auto">
                <Tab :tabs="tabs" class="mb-2" />
                <div class="flex flex-col justify-center">
                  <dv-border-box7
                    v-for="item in treatData"
                    style="height: 62px; margin-top: 8px"
                    :color="['#6e87a4', '#40c3c8']"
                  >
                    <div class="flex justify-center text-sm">
                      <span class="w-1/6">
                        <div v-if="item.type === 1" class="w-8 h-8 border-2 rounded-xl mt-3.5 mx-2 pl-1 text-lg text-red-500">
                          {{ item.title.slice(0, 1) }}
                        </div>
                        <div v-else class="w-8 h-8 border-2 rounded-2xl mt-3.5 mx-2 pl-1 text-lg text-yellow-300">
                          {{ item.title.slice(0, 1) }}
                        </div>
                      </span>
                      <span class="w-3/6 text-center mt-2.5" style="font-size: 13px">
                        <p>【{{ item.department }}】</p>
                        <p>{{ item.symptom }}</p>
                      </span>
                      <span class="w-2/6 text-center mt-2.5">{{ item.time }}</span>
                    </div>
                  </dv-border-box7>
                </div>
              </div>
            </dv-border-box12>
          </el-row>
        </el-col>
        <!-- 中间 -->
        <el-col :span="20">
          <dv-border-box12 class="w-full h-full p-4" :color="['#6e87a4', '#40c3c8']">
            <div class="w-full h-16 border-b-2 border-cyan-400 flex justify-between">
              <span class="w-14 h-14 bg-amber-50 rounded-xl text-red-500 text-3xl text-center" style="line-height:54px">{{ patientTreatInfo.title.slice(0,1) }}</span>
              <div class="w-1/12 flex flex-col">
                <span class="h-1/2">住院号</span>
                <span class="h-1/2 text-base font-bold">{{ patientTreatInfo.treatId }}</span>
              </div>
              <div class="w-2/12 flex flex-col">
                <span class="h-1/2">时间</span>
                <span class="h-1/2 text-base font-bold">{{ patientTreatInfo.time }}</span>
              </div>
              <div class="w-2/12 flex flex-col">
                <span class="h-1/2">院部</span>
                <span class="h-1/2 text-sm font-bold">{{ patientTreatInfo.address }}</span>
              </div>
              <div class="w-1/12 flex flex-col">
                <span class="h-1/2">科室</span>
                <span class="h-1/2 text-sm font-bold">{{ patientTreatInfo.department }}</span>
              </div>
              <div class="w-1/12 flex flex-col">
                <span class="h-1/2">医生</span>
                <span class="h-1/2 text-sm font-bold">{{ patientTreatInfo.doctor }}</span>
              </div>
              <div class="w-1/12 flex flex-col">
                <span class="h-1/2">检验结果</span>
                <span class="h-1/2 text-sm text-amber-500 font-bold">{{ patientTreatInfo.inspection }}</span>
              </div>
              <div class="w-1/12 flex flex-col">
                <span class="h-1/2">检查结果</span>
                <span class="h-1/2 text-sm text-amber-500 font-bold">{{ patientTreatInfo.examine }}</span>
              </div>
            </div>
            <div class="w-full p-2 overflow-y-auto" style="height: 93%">
              <el-tabs v-model="tabDefault" :tab-position="tabPosition" class="demo-tabs h-full">
                <el-tab-pane
                  v-for="item in contentList"
                  :key="item.value"
                  :label="item.label"
                  :name="item.value"
                >
                  <MedicalRecord v-if="item.content === 'medicalRecord'" />
                  <InspectionReport v-else-if="item.content === 'inspectionReport'" />
                  <ExamineReport v-else-if="item.content === 'examineReport'" />
                  <TreatRecord v-else-if="item.content === 'treatRecord'" />
                  <InpatientOrder v-else-if="item.content === 'inpatientOrder'" />
                  <NursingRecord v-else-if="item.content === 'nursingRecord'" />
                  <ElectronicRecord v-else />
                </el-tab-pane>
              </el-tabs>
            </div>
          </dv-border-box12>
        </el-col>
      </el-row>
    </div>
    <!--    <Footer />-->
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
// 引入公共组件
import Header from "./components/header.vue";
import Footer from "./components/footer.vue";
import Tab from "./components/tab.vue";
// 引入电子病历相关组件
import MedicalRecord from "./components/patient/medicalRecord.vue"; // 病历文书
import InspectionReport from "./components/patient/inspectionReport.vue"; // 检验报告
import ExamineReport from "./components/patient/examineReport.vue"; // 检查报告
import TreatRecord from "./components/patient/treatRecord.vue"; // 诊断记录
import InpatientOrder from "./components/patient/inpatientOrder.vue"; // 住院医嘱
import NursingRecord from "./components/patient/nursingRecord.vue"; // 护理文书
import ElectronicRecord from "./components/patient/electronicRecord.vue"; // 电子病历
// 引入SVG图片
import Collect1 from "@/assets/svg/collect1.svg?component"; // 收藏
import Collect2 from "@/assets/svg/collect2.svg?component"; // 已收藏
import Eye1 from "@/assets/svg/eye1.svg?component"; // 可视
import Eye2 from "@/assets/svg/eye2.svg?component"; // 不可视
import Sex1 from "@/assets/svg/sex1.svg?component"; // 男性
import Sex2 from "@/assets/svg/sex2.svg?component"; // 女性
// 定义标题
const title = ref<string>("患者综合视图");
// 收藏标识
const showCollect = ref<boolean>(false);
// 定义患者信息
const patientInfo = ref<object>({
  patientName: "刘德华",
  patientSex: "male",
  patientAddr: "北京市东城区一号院",
  patientNo: "0103076604",
  originalIdNo: "400100200001013318"
});
// 展示身份证号标识
const showEye = ref<boolean>(false);
const toggleCollect = () => {
  showCollect.value = !showCollect.value;
};
// 身份证号码显示/隐藏流程
const originalIdNo = ref<string>("400100202001013318");
const originalIdNoLength = patientInfo.value.originalIdNo.length;
const maskedIdNo = ref<string>(
  new Array(originalIdNoLength).fill("*").join("")
);
const displayedIdNo = ref<string>(maskedIdNo.value);
const toggleIdNo = () => {
  // 切换 displayedIdNo 的值
  displayedIdNo.value =
    displayedIdNo.value === originalIdNo.value
      ? maskedIdNo.value
      : originalIdNo.value;

  showEye.value = displayedIdNo.value === originalIdNo.value;
};

// 搜索事件
const searchText = ref<string>("");
const handleSearch = () => {
  console.log("搜索内容:", searchText.value);
  // 执行搜索操作...
};
// Tab 切换
// 定义tab
const tabs = ref<Array>([
  {
    title: "全部",
    component: "TabContent1"
  },
  {
    title: "门诊诊疗",
    component: "TabContent2"
  },
  {
    title: "住院诊疗",
    component: "TabContent2"
  }
]);
// 定义诊疗数据
const treatData = ref<Array>([
  {
    type: 1,
    title: "住院",
    department: "呼吸与危重症科",
    symptom: "呼吸困难",
    time: "2024-01-01 / 2024-02-20"
  },
  {
    type: 2,
    title: "门诊",
    department: "呼吸门诊",
    symptom: "呼吸困难",
    time: "2024-01-18"
  },
  {
    type: 2,
    title: "门诊",
    department: "呼吸门诊",
    symptom: "呼吸困难",
    time: "2024-02-20"
  },
  {
    type: 1,
    title: "住院",
    department: "呼吸与危重症科",
    symptom: "呼吸困难",
    time: "2024-02-21 / 2024-03-23"
  },
  {
    type: 2,
    title: "门诊",
    department: "皮肤科门诊",
    symptom: "瘙痒",
    time: "2024-03-22"
  },
  {
    type: 2,
    title: "门诊",
    department: "全科医学门诊",
    symptom: "慢性阻塞性疾病",
    time: "2024-03-23"
  },
  {
    type: 2,
    title: "门诊",
    department: "规定病种门诊",
    symptom: "暂无",
    time: "2024-03-24"
  }
]);

// 定义患者住院信息
const patientTreatInfo = ref<object>({
  type: 1,
  title: "住院",
  treatId: "0010007",
  address: "北京市东城区分院",
  department: "呼吸与危重症科",
  doctor: "张学友",
  time: "2024-01-01 / 2024-02-20",
  inspection: 0, // 检验结果
  examine: 0 // 检查结果
});
// 定义病历 & 文书 & 医嘱 & 检验报告 。。。
const tabPosition = ref<string>("left");
const tabDefault = ref<number>(1);
const contentList = ref<Array>([
  { label: "病历文书", value: 1, content: "medicalRecord" },
  { label: "检验报告", value: 2, content: "inspectionReport" },
  { label: "检查报告", value: 3, content: "examineReport" },
  { label: "诊断记录", value: 4, content: "treatRecord" },
  { label: "住院医嘱", value: 5, content: "inpatientOrder" },
  { label: "护理文书", value: 6, content: "nursingRecord" },
  { label: "电子病历", value: 7, content: "electronicRecord" }
]);
</script>

<style lang="scss">
.demo-tabs > .el-tabs__content {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  width: 70%;
  margin: 10px auto;
  border-top: 2px solid #ffffff;
  overflow: auto;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}

.demo-tabs .el-tabs__item {
  width: 100px;
  height: 40px;
  font-size: 15px;
  color: #ffffff;
  border-radius: 3px;
}
</style>
